<template>
<div class="use-media-query">
  <div>UseMediaQuery</div>
  <div>是大屏吗？ {{ isBigScreen ? '是' : '否' }}</div>
</div>
</template>

<script setup lang="ts">
import { useMediaQuery } from "@vueuse/core";

defineOptions({
  name: "UseMediaQuery"
})
const isBigScreen = useMediaQuery("(min-width: 1024px)")
</script>

<style scoped lang="css">
.use-media-query {

}
</style>
